<style scoped lang="scss">
.box {
  height: 100%;
  width: 100%;
  background: #eee;
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.price1 {
  height: 80px;
  width: 100%;
  margin-top: 5px;
  background: #fff;

  .p1 {
    font-size: 25px;
    color: red;
    margin: 5px;
  }

  .title {
    display: flex;

    .otc {
      display: inline-block;
      width: 30px;
      height: 20px;
      background: #64c996;
      font-size: 12px;
      color: #fff;
      text-align: center;
      line-height: 20px;
      margin: 3px 5px 0 10px;
      border-radius: 2px;
    }

    .zhi {
      font-size: 20px;
    }
  }
}

.function {
  margin-top: 10px;
  width: 100%;
  height: 70px;
  display: flex;
  background: #fff;

  .zhu {
    width: 52%;
    height: 70%;
    border-right: 1px solid #ccc;
    margin-top: 5px;

    p {
      width: 190px;
      margin: 5px 0 0 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .yong {
    margin-top: 5px;

    p {
      width: 170px;
      margin: 5px 0 0 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.btn {
  width: 90%;
  border-radius: 50px;
  height: 40px;
  border: 0;
  margin: 0 0 0 20px;
  background: linear-gradient(to right, #ff4425, #ff603f);
  position: absolute;
  bottom: 10px;
  color: #fff;
}

.express {
  width: 100%;
  height: 120px;
  margin-top: 10px;
  background: #fff;
}

.kuaidi {
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  font-size: 12px;

  .pharmacy {
    display: inline-block;
    margin-left: 10px;
    color: #b7b7b7;
  }

  .chu {
    margin-left: 10px;
  }

  .icon {
    widows: 14px;
    height: 14px;
    margin-top: 10px;
    margin-left: 5px;
  }
}

.xq {
  width: 100%;
  height: 50px;
  background: #eeefee;
  text-align: center;
  line-height: 50px;
  color: #ccc;
}

.xiao {
  width: 100%;
  background: #fff;
  margin-top: 10px;

  .fei {
    margin: 10px 0 0 10px;
  }

  .shuoming {
    font-size: 13px;
    color: #ccc;
    margin: 5px 0 0 10px;
  }
}

.tu img {
  width: 100%;
}

.wenxin {
  width: 100%;
}

.tishi {
  width: 100%;
  background: #fff;

  .tishi1 {
    width: 95%;
    margin-left: 10px;

    h2 {
      margin: 5px 0 8px 5px;
    }

    p {
      font-size: 13px;
    }
  }
}

.can {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 10px;
  // margin: 10px;
  margin: 10px 0;

  .ba {
    height: 50px;
    width: 100%;
    line-height: 50px;
  }

  table {
    width: 100%;
    // border: 1px solid black;
    background-color: #fff;
    border-collapse: collapse;
  }

  td {
    width: 100px;
    height: 40px;
    // border: 1px solid black;
    font-size: 13px;
    padding: 10px;
    border-right: 2px solid #fff;
  }

  tr:nth-child(odd) {
    background: #f0f1f4;
  }

  tr:nth-child(even) {
    background: #f6f7fa;
  }
}
</style>
<template>
  <div>
    <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" :fixed="true"/>
    <div class="box">
      <van-swipe>
        <van-swipe-item v-for="(item,index) in tp" :key="index">

          <img :src="item" alt="" style="width: 100%" @click="preview(index)" />
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
      </van-swipe>

      <div class="price1">
        <p class="p1">￥{{ text.price }}</p>
        <div class="title">
          <span class="otc">{{ text.tag }}</span>
          <span class="zhi">{{ text.title }}</span>
        </div>
      </div>
      <!-- 主治功能 -->
      <div class="function" @click="pop">
        <div class="zhu">
          <p>主治功能</p>
          <p>{{ list.main_function }}</p>
        </div>
        <div class="yong">
          <p>用法用量</p>
          <p>{{ list.use_method }}</p>
        </div>
      </div>
      <!-- 主治功能弹窗 -->
      <van-popup v-model:show="show" position="bottom" :style="{ height: '80%' }">
        <div class="can">
          <div class="ba">药品说明书</div>
          <table>
            <tr>
              <td>药品名称</td>
              <td colspan="2">{{ list.name }}</td>
            </tr>
            <tr>
              <td>生产企业</td>
              <td colspan="2">{{ list.factory }}</td>
            </tr>
            <tr>
              <td>药品规格</td>
              <td colspan="2">{{ list.specification }}</td>
            </tr>
            <tr>
              <td>主治功能</td>
              <td colspan="2">
                {{ list.main_function }}
              </td>
            </tr>
            <tr>
              <td>用法用量</td>
              <td colspan="2">
                {{ list.use_method }}
              </td>
            </tr>
          </table>
        </div>
        <button class="btn" @click="guan">关闭</button>
      </van-popup>

      <!-- 药品说明 -->

      <div class="can">
        <div class="ba">药品说明</div>
        <table>
          <tr>
            <td>药品名称</td>
            <td colspan="2">{{ list.name }}</td>
          </tr>
          <tr>
            <td>生产企业</td>
            <td colspan="2">{{ list.factory }}</td>
          </tr>
          <tr>
            <td>药品规格</td>
            <td colspan="2">{{ list.specification }}</td>
          </tr>
          <tr>
            <td>主治功能</td>
            <td colspan="2">
              {{ list.main_function }}
            </td>
          </tr>
          <tr>
            <td>用法用量</td>
            <td colspan="2">
              {{ list.use_method }}
            </td>
          </tr>
        </table>
      </div>
    </div>

    <div class="xq">————&emsp;商品详情&emsp;————</div>
    <!-- 消费提示 -->
    <div class="xiao">
      <p class="fei">消费提示</p>
      <p class="shuoming">【OTC】请按药品说明书或者在药师指导下购买和使用</p>
    </div>

    <div class="tu">
      <img v-lazy="tp[0]" alt="" />
      <img v-lazy="tp[1]" alt="" />
      <img v-lazy="tp[2]" alt="" />
    </div>

    <div class="tishi">
      <div class="tishi1">
        <h2>温馨提示</h2>
        <p>
          1、药品请认真阅读药品说明书的注意事项、禁忌等内容，并在医师指导下使用，将药品置于儿童无法触及位置
        </p>
        <p>
          2、处方通过互联网医院开具或自行上传已有处方后，经执证药师审核，才能发货
        </p>
        <p>
          3、医疗器械：请仔细阅读产品说明书或者在义务人员的指导下购买和使用，禁忌内容或者注意事项详见说明书
        </p>
        <p>4、保健视频：本品不能代替药物</p>
        <p>5、化妆品：化妆品不能代替药品，不能治疗皮肤病等疾病</p>
        <p>
          6、药品属于特殊商品，按照国家食品药品监督管理局2016版GSP第一百七十三条规定，除药品质量原因外，药品一经售出，不得退换
        </p>
        <p>
          7、图片为实物拍摄，由于厂家不定期更换产品包装，如遇新包装上市图片更新可能
        </p>
      </div>
    </div>

    <div class="tishi">
      <div class="tishi1">
        <h2>价格说明</h2>
        <p>
          1、未划线价：未划线价是当前商品或服务在本平台上的实时销售价（不含包装费、运输费等），是您最终决定时候购买商品或服务的依据。具体成交价格根据商品或服务参加的活动等情况发生变化，最终以订单结算页面呈现的价格为准。
        </p>
        <p>
          2、划线价：划线价为参考价，并非原价或线下实体门店的销售价。该划线价可能是商品或服务的网络零售指导价、上架提供的正品零售价或该商品/服务在本平台上曾经展示过的销售价等。由于地区、时间的差异性和市场行情波动，零售指导价、销售价等可能会与您购物时展示的价格不一致，划线价仅供您参考。
        </p>
      </div>
    </div>
    <!-- 图片预览 -->
    <van-image-preview v-model:show="look" :images="tp" @click="onChange"></van-image-preview>
  </div>

  <!-- 底部加入购物车按钮 -->
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
    <van-action-bar-icon icon="cart-o" text="购物车" />
    <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
    <van-action-bar-button type="warning" text="加入购物车" @click="addCart" />
    <van-action-bar-button type="danger" text="立即购买" />
  </van-action-bar>
  <!-- </div> -->
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getlistdetail } from '@/request/http'
import { useCounterStore } from '../../api/pinia'
// import { zhDebounce } from '../../utils/fang'
import { ElMessage } from 'element-plus'
// 返回上一页
const onClickLeft = () => history.back();
// pinia仓库
const store = useCounterStore()
// 
const route = useRoute()
// 开关
const show = ref(false)

// 图片预览关闭
const look =ref(false);
// 图片预览
// const preview =(index:number)=>{
//   look.value =false;
//   setTimeout(()=>{
//     look.value =true;
//   },100)
// }

const preview = (index:number)=>{
  look.value = false;
  setTimeout(()=>{
    look.value = true;
  },100)
}




// 点击关闭
const onChange =()=>{
  look.value =false;
}

//点击主治功能弹出弹窗
const pop = () => {
  show.value = true
}
//点击关闭 关闭弹窗
const guan = () => {
  show.value = false
}

//接受路由传参
const { id } = route.params

//获取详情数据
const list = ref({})
const kd = ref({})
const tp = ref([])
const text = ref({})
const item = ref({})
getlistdetail(id as string).then(res => {
  // 获取到的值赋给item
  item.value = res.data.data
  console.log(item)
  // 获取到的值赋给list
  list.value = res.data.data.drug_desc
  // 获取到的值赋给tp
  tp.value = res.data.data.swiper_info.img_list
  // 获取到的值赋给text
  text.value = res.data.data.goods_info
  // 获取到的值赋给kd
  kd.value = res.data.data.express_info

})

// 点击加入购物车
// const addCart = zhDebounce(() => {
//   store.addCart(item.value)
//   // router.push('/cart')
//   ElMessage.success('添加成功')
// }, 500)
</script>
